<div class="fullScreen bg-light">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex align-items-center mb-3">
                <fa-icon icon="chart-area" class="mr-2" style="font-size: 1.5rem; color: #3498db;"></fa-icon>
                <h2 class="mb-0">统计数据</h2>
            </div>
            <p class="text-muted">
                <i>JHipster 统计数据是匿名收集的，来源于 微服务代码模版 或同意在安装 JHipster 命令行时发送统计数据的用户。</i>
            </p>
        </div>  
    </div>
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="form-group">
                <select id="reviewFullScreen" class="form-control custom-select" [ngModel]="timeScale" (ngModelChange)="onSelectTimeScale($event)">
                    <optgroup label="全局概览">
                        <option value="default">已生成的应用</option>
                        <option value="clientFramework">客户端框架</option>
                        <option value="buildTool">Maven 与 Gradle</option>
                    </optgroup>
                    <optgroup label="时间尺度">
                        <option value="daily">最近24小时</option>
                        <option value="weekly">最近一个月</option>
                        <option value="monthly">最近一年</option>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="col-md-6 d-flex align-items-center">
            <button class="btn btn-primary rounded-pill" (click)="refreshData()">
                <fa-icon [icon]="'sync'" class="mr-1"></fa-icon> <span>刷新</span>
            </button>
        </div>
    </div>
    <hr class="my-4" />
    <div [ngStyle]="{'display': overview ? 'block' : 'none'}">
        <div class="row">
            <div class="col-md-2">
                <div class="row">
                    <div class="card text-center text-white bg-primary mb-3 numbersCard shadow-sm rounded">
                        <div class="card-body">
                            <h4 class="card-text font-weight-bold">{{countYos}}</h4>
                            <strong>用于统计的项目</strong>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="card text-center text-white bg-info mb-3 numbersCard shadow-sm rounded">
                        <div class="card-body">
                            <h4 class="card-text font-weight-bold">{{countJdls}}</h4>
                            <strong>微服务代码模版 管理的 JDL</strong>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="card text-center text-white bg-success mb-3 numbersCard shadow-sm rounded">
                        <div class="card-body">
                            <h4 class="card-text font-weight-bold">{{countUsers}}</h4>
                            <strong>微服务代码模版 注册用户</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-12">
                        <div class="chart card card-body text-center text-dark bg-white shadow-sm rounded" (click)="timeScale = 'daily'; setTimeScale()">
                            <h5 class="text-primary font-weight-bold">最近24小时</h5>
                            <hr class="my-3" />
                            <div #chartTrendFull4 class="chartBox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="chart card card-body text-center text-dark bg-white shadow-sm rounded" (click)="timeScale = 'weekly'; setTimeScale()">
                    <h5 class="text-primary font-weight-bold">最近一个月</h5>
                    <hr class="my-3" />
                    <div #chartTrendFull3 class="chartBox"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="chart card card-body text-center text-dark bg-white shadow-sm rounded" (click)="timeScale = 'monthly'; setTimeScale()">
                    <h5 class="text-primary font-weight-bold">最近一年</h5>
                    <hr class="my-3" />
                    <div #chartTrendFull2 class="chartBox"></div>
                </div>
            </div>
        </div>
        <div class="mb-4"></div>
    </div>


    <div [ngStyle]="{'display': overview ? 'none' : 'block'}">
        <div class="row">
            <div class="col-md-6">
                <div class="categoryChart card card-body text-center text-dark shadow-sm rounded">
                    <h4 class="text-primary font-weight-bold">客户端框架分布</h4>
                    <hr class="my-3" />
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartFrameworkLine class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded mb-3"></div>
                    </div>
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartFrameworkPie class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                    </div>
                    <div class="mb-3"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="categoryChart card card-body text-center text-dark shadow-sm rounded">
                    <h4 class="text-primary font-weight-bold">Maven/Gradle 分布</h4>
                    <hr class="my-3" />
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartBuildtoolLine class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded mb-3"></div>
                    </div>
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartBuildtoolPie class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                    </div>
                    <div class="mb-3"></div>
                </div>
            </div>
        </div>
        <div class="categoryChart card card-body text-center text-dark shadow-sm rounded mt-4">
            <h4 class="text-primary font-weight-bold" style="text-align: end">生产环境数据库分布</h4>
            <hr class="my-3" />
            <div class="row">
                <div class="col-md-5">
                    <div #chartDBProdPie class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                </div>
                <div class="col-md-7">
                    <div #chartDBProdLine class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                </div>
            </div>
        </div>
        <div class="categoryChart card card-body text-center text-dark shadow-sm rounded mt-4">
            <h4 class="text-primary font-weight-bold">缓存提供者</h4>
            <hr class="my-3" />
            <div class="row">
                <div class="col-md-7">
                    <div #chartCacheLine class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                </div>
                <div class="col-md-5">
                    <div #chartCachePie class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                </div>
            </div>
        </div>
        <div class="categoryChart card card-body text-center text-dark shadow-sm rounded mt-4 mb-4">
            <h4 class="text-primary font-weight-bold">云部署</h4>
            <hr class="my-3" />
            <div class="row">
                <div class="col-md-6">
                    <div #chartDeploymentLine class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                </div>
                <div class="col-md-6">
                    <div #chartDeploymentPie class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="categoryChart card card-body text-center text-dark shadow-sm rounded">
                    <h4 class="text-primary font-weight-bold">使用的 JHipster 版本</h4>
                    <hr class="my-3" />
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartVersionLine class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded mb-3"></div>
                    </div>
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartVersionPie class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                    </div>
                    <div class="mb-3"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="categoryChart card card-body text-center text-dark shadow-sm rounded">
                    <h4 class="text-primary font-weight-bold">应用类型</h4>
                    <hr class="my-3" />
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartAppTypeLine class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded mb-3"></div>
                    </div>
                    <div class="row col-md-11 chartBoxContainer mx-auto">
                        <div #chartAppTypePie class="chartBox chart card card-body text-center text-dark bg-white shadow-sm rounded"></div>
                    </div>
                    <div class="mb-3"></div>
                </div>
            </div>
        </div>
    </div>
</div>
